import React, { useEffect, useState, useRef } from 'react';
import { Space, PopUp } from '@/components/UiComponents'
import { backgroundObj, loginData } from '@/utils/utils';
import InterTime from '@/components/InterTime';
import CountdownTimer from '../CountdownLottery';
import Router from '@/utils/router'
import { View, Text } from '@tarojs/components'
import { fetchLotteryQualification } from '@/server/shop'
import './index.scss';
const Lottery = (props) => {
  const { data = {}, renderStyle, dispatch, visible, onClose, goodsId, onOpen, onShare, onhandleMessage, hpFlag = '0' } = props
  const account = loginData() || {}
  const { username, unionId, openId, organizationId, profile, token, } = account
  const [userStatsObj, setUserStatusObj] = useState({})
  const { prizeList = [], lotteryInfo = {} } = data
  const { status, realPrizeTime, id, joinType, appointComment } = lotteryInfo
  const { totalQualificationUser, qualificationFlag } = userStatsObj
  useEffect(() => {
    if (visible) {
      fetchData()
    }
  }, [visible])
  const PrizeCard = (props) => {
    const { data } = props
    const { goodsName, goodsCover, prizeStock } = data
    return <View className='prize_card_box'>
      <View className='prize_card_profile' style={backgroundObj(goodsCover)}></View>
      <View className='prize_card_content'>
        <View className='prize_card_title'>{goodsName}</View>
        <View className='prize_card_tagBox'>共{prizeStock}份：{totalQualificationUser}人参与</View>
      </View>
    </View>
  }
  const RenderTask = (props) => {
    if (joinType === 'anyComment') {
      return <View className='lottery_gift_task'>
        <View className='lottery_gift_taskTitle'>参与任务</View>
        <View className='lottery_gift_taskdesc'>发送任意评论</View>
      </View>
    } else if (joinType === 'online') {
      return <View className='lottery_gift_task'>
        <View className='lottery_gift_taskTitle'>参与任务</View>
        <View className='lottery_gift_taskdesc'>在线抽奖</View>
      </View>
    }
    else if (joinType === 'appointComment') {
      return <View className='lottery_gift_task'>
        <View className='lottery_gift_taskTitle'>参与任务</View>
        <View className='lottery_gift_taskdesc'>发送评论：{appointComment}</View>
      </View>
    }
    else if (joinType === 'share') {
      return <View className='lottery_gift_task'>
        <View className='lottery_gift_taskTitle'>参与任务</View>
        <View className='lottery_gift_taskdesc'>分享直播间</View>
      </View>
    } else {
      return <View className='lottery_gift_task'>参与成功 等待开奖</View>
    }
  }
  const RenderBtn = (props) => {
    if (qualificationFlag === '1') {
      return <View className='lottery_gift_btn lottery_gift_opcity'>参与成功 等待开奖</View>
    }
    else if (joinType === 'anyComment') {
      return <View className='lottery_gift_btn' onClick={() => {
        if (token) { onhandleMessage('') }
        else {
          Router('login')
        }
      }}>评论参与</View>
    }
    else if (joinType === 'appointComment') {
      return <View className='lottery_gift_btn' onClick={() => {
        if (token) { onhandleMessage(appointComment) }
        else {
          Router('login')
        }
      }} >评论参与</View>
    }
    else if (joinType === 'share') {
      return <View className='lottery_gift_btn' onClick={() => {
        if (token) { onShare() }
        else {
          Router('login')
        }
      }} >立刻分享</View>
    } else {
      return <View className='lottery_gift_btn lottery_gift_opcity'>参与成功 等待开奖</View>
    }
  }
  const fetchData = () => {
    fetchLotteryQualification({
      token,
      lotteryId: id,
      goodsId,
      organizationId
    }).then(e => {
      setUserStatusObj(e)
    })
  }
  return <View>
    {status === '1' && <View className={hpFlag === '1' ? 'lottery_gift_box lottery_giftHp_box' : renderStyle === 'default' ? 'lottery_gift_box' : 'lottery_gift_box lottery_giftSp_box'} onClick={() => onOpen()}>
      <View className='lottery_gift_showTime'>
        <InterTime type='lotter' times={realPrizeTime}></InterTime>
      </View>
    </View>}
    <PopUp
      position={hpFlag === '1' ? 'right' : 'bottom'}
      disableBodyScroll={false}
      getContainer={null}
      onMaskClick={() => {
        onClose()
      }} onClose={() => onClose()} visible={visible}>
      <View onClick={(e) => {
        e.stopPropagation()
      }} className={hpFlag === '1' ? 'lotter_layer lotter_layerHp' : 'lotter_layer'}>
        <View className='lotter_layer_bottom'>
          <View className='lotter_layer_content'>
            <View className='lotter_layer_title'>
              <Text className='lotter_question_Text' onClick={() => Router('lotteryRules')}></Text>
              <Text className='lotter_title_Text'></Text>
              <Text className='lotter_close_Text' onClick={() => onClose()}></Text>
            </View>
            {realPrizeTime && <CountdownTimer time={realPrizeTime}></CountdownTimer>}
            {prizeList.map((item, index) => {
              return <PrizeCard data={item} key={index}></PrizeCard>
            })}
            <RenderTask></RenderTask>
            <RenderBtn></RenderBtn>
            <View className='lottery_gift_rule'>请勿离开直播间，否则抽奖资格失效</View>
          </View>
        </View>
      </View>
    </PopUp>
  </View>

}
export default Lottery
